<template>
    <container type="top-header" class="g-width100 g-height100"  aside-style="width:320px;" main-style="padding:0px;">
        <div slot="aside" class="g-width100 g-height100">

            <el-card>
                <div><span>{{templateTitle}}</span></div>
                <div  v-for="item in templateContentFormated" :key="item"><span>{{item}}</span></div>
            </el-card>
        </div>
        <div slot="main" class="g-width100 g-height100">
            <Form
                    ref="form"
                    :form-items="formItems"
                    :format-form="formatForm"
                    submit-success-text="恭喜，发送成功"
            ></Form>
        </div>
    </container>
</template>

<script>
    import Form from '../../../../../common-util/src/components/page/Form.vue'
    import Container from '../../../../../common-util/src/components/page/Container.vue'
    import {match} from "../../../../../common-util/src/tools/RegTools"
    let predefineColors = [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        '#c7158577'
    ]
    export default {
        components:{
            Form,
            Container
        },
        props:{
            // 公众号编码
            appCode: String,
            templateId: String,
            templateContent: String,
            templateTitle: String
        },
        computed:{
            templateContentFormated(){

                let r = []
                if(this.templateContent){
                    let tempContent = this.templateContent
                    let temp = tempContent.split('\n')
                    for (let i = 0; i < temp.length; i++) {
                        if(temp[i]){
                            r.push(temp[i])
                        }
                    }
                }
                return r
            },
            matchedContent(){
                if(this.templateContent){
                    return match('(?<=\\{\\{)[^}]*(?=\\}\\})',this.templateContent)
                }
                return null
            },
            formItems(){

                let datas = []
                if(this.matchedContent){
                    datas = this.matchedContent
                }
                let r = [
                    {
                        field: {
                            name: 'templateId',
                            value: this.templateId
                        }
                    },
                    {
                        field: {
                            name: 'toUser'
                        },
                        element:{
                            label: '接收者openid',
                            required: true
                        }
                    },
                    {
                        field: {
                            name: 'url'
                        },
                        element:{
                            label: '跳转链接',
                            placeholder: '不填空不跳转，以小程序跳转优先',
                        }
                    },
                    {
                        field: {
                            name: 'isMiniProgram'
                        },
                        element:{
                            type: 'switch',
                            label: '跳转小程序'
                        }
                    },
                    {
                        field: {
                            name: 'appid'
                        },
                        element:{
                            label: '小程序appId',
                            required: true,
                            show: (form)=> {return form.isMiniProgram}
                        }
                    },
                    {
                        field: {
                            name: 'pagePath'
                        },
                        element:{
                            label: '页面路径',
                            placeholder: '小程序页面路径',
                            required: true,
                            show: (form)=> {return form.isMiniProgram}
                        }
                    }
                ]

                for (let i = 0; i < datas.length; i++) {

                    let keyword = this.rawToKeyword(datas[i])
                    r.push({
                        field: {
                            name: keyword
                        },
                        element:{
                            label: keyword,
                            required: true
                        }
                    })
                    r.push({
                        field: {
                            name: keyword + '_colorcolorcolor'
                        },
                        element:{
                            type: 'colorPicker',
                            colorPicker:{
                                predefine: predefineColors
                            },
                            label: keyword + '颜色',
                            placeholder: '如#ffffff',
                            required: true
                        }
                    })
                }

                let button = {
                        element:{
                            type: 'button',
                            button:[
                                {
                                    action: 'submit',
                                    requestMethod:'post',
                                    url: this.sendUrl,
                                    label: '确认发送'
                                },
                                {
                                    action: 'reset',
                                    label: '重置',
                                    type: 'default'
                                }
                            ]
                        }
                    }
                r.push(button)
                return r
            }
        },
        data(){
            return {
            }
        },
        methods:{
            // raw 应用是 key1.DATA
            // 返回key1
            rawToKeyword(raw){

                return raw.replace('.DATA','')
            },
            keywordToRaw(keyword){
                return keyword + '.DATA'
            },
            formatForm(form){
                let tempForm = {
                    data: [],
                    miniProgram:{}
                }
                for (let key in form){
                    if(form.isMiniProgram && (key == 'appid' || key == 'appPath')){
                        tempForm.miniProgram[key] = form[key]
                    }else if(this.matchedContent && this.matchedContent.some(item => item == this.keywordToRaw(key))){
                        tempForm.data.push({
                            name: key,
                            value: form[key],
                            color: form[key + '_colorcolorcolor']
                        })
                    }else{
                        if(key.indexOf('_colorcolorcolor') < 0){
                            tempForm[key] = form[key]
                        }
                    }
                }
                return tempForm
            },
            sendUrl(form) {
                if(!this.appCode){
                    this.$message.error('请选择公众号')
                    return false
                }
                return this.$baseURL.wx + '/wx/mp/tempmsg/'+ this.appCode +'/sendTemplateMsg'
            }

        }
    }
</script>

<style scoped>

</style>